import {
	DataQueryPage,
	FormBox,
	TableBox,
	ImageItemType,
	PopupEvent,
	dialog,
	drawer,
	FormItemOptions,
} from "@pkg";

interface TestForm {
	name: string;
	address: string;
	sex: string;
	date: Date;
	selectDate: Date[];
	img: ImageItemType[];
	name1: string;
	name2: string;
	name3: string;
	name4: string;
}
interface TestTable {
	name: string;
	name1: string;
	name2: number;
	name3: "Y" | "N";
	name4: number;
	children?: TestTable;
}
export default class Test1Page extends DataQueryPage<TestForm, TestTable> {
	private testDreawer!: PopupEvent;
	constructor() {
		super("test", "/page/#pageNum#/#pageSize#/classfiy");
	}
	initForm(form: FormBox<TestForm>): void {
		form.addFormItem({
			component: "Input",
			key: "name",
			label: "名字：",
			value: "",
			placeholder: "请输入名称",
		});
		form.addFormItem({
			component: "Input",
			key: "address",
			label: "地区：",
			value: "武汉",

			disabled: true,
			placeholder: "请选择地区",
			conf: {},
		});
		form.addFormItem({
			component: "Select",
			key: "sex",
			label: "性别",
			value: "女",
			placeholder: "请选择性别",
			conf: {
				options: [
					{
						label: "男",
						value: "男",
					},
					{
						label: "女",
						value: "女",
					},
				],
			},
		});
		form.addFormItem({
			component: "Select",
			key: "date",
			label: "出生时间",
			placeholder: "请选择出生时间",
			value: new Date(),
			conf: {
				options: [],
			},
		});

		this.addFormButton({
			key: "btn3232",
			label: "重置表单",
			icon: "Apple",
			type: "danger",
			click: () => {
				form.reset();
				console.log(form.getFormValue());
			},
		});
		this.addFormButton({
			key: "btn66",
			label: "清空表格数据",
			icon: "Apple",
			type: "info",
			click: () => {
				this.setTableSource([]);
			},
		});
		this.addFormButton({
			key: "btn2",
			label: "设置表格可选",
			type: "primary",
			icon: "Avatar",
			click: () => {
				this.setTableSelection(true);
			},
		});
		this.addFormButton({
			key: "btn3",
			label: "设置表格不可选",
			type: "warning",
			icon: "WindPower",
			click: () => {
				this.setTableSelection(false);
			},
		});
		this.addFormButton({
			key: "btn322",
			label: "获取表格选中数据",
			type: "warning",
			icon: "WindPower",
			click: () => {
				console.log(this.getTableSelectionData());
			},
		});
	}
	initTable(table: TableBox<TestTable>): void {
		table.setTableSource([
			{
				name: "https://ecmb.bdimg.com/tam-ogel/1815134652_-1760084283_1200_1200.png",
				name1: "李四",
				name2: 1689837422609,
				name3: "Y",
				name4: 2500,
			},
		]);

		table.addTableCol([
			{
				key: "name1",
				name: "姓名",
			},
		]);

		// table.setTableSelectionData(this.getTableSource()); // 初始化选中
		table.addTableOpr({
			name: "消息",
			type: "default",
			icon: "Message",
			callback: () => {
				this.showMsgBox({
					title: "测试",
					content: "您好",
				});
			},
		});
		table.addTableOpr({
			name: "新增",
			type: "primary",
			icon: "Aim",
			callback: () => {},
		});
		table.addTableOpr({
			name: "编辑",
			type: "warning",
			icon: "Edit",
			callback: () => {
				this.showEditDialog();
			},
		});
		table.addTableOpr({
			name: "详情",
			type: "danger",
			icon: "Edit",
		});
		table.addTableOpr({
			name: "新增表单",
			type: "warning",
			icon: "Edit",
			callback: () => {
				const arr: FormItemOptions<TestForm>[] = [
					{
						key: "name3",
						value: "1",
						label: "测试字段",
						component: "Input",
					},
					{
						key: "name4",
						value: "22222",
						label: "测试字段2",
						component: "Input",
					},
				];
				arr.forEach(e => {
					this.addFormItem(e);
				});
			},
		});
		table.addTableOpr({
			name: "侧边栏",
			type: "danger",
			icon: "Drizzling",
			callback: () => {
				this.showTestDrawer();
			},
		});
	}

	private showEditDialog() {
		dialog
			.initForm(form => {
				form.addFormItem({
					component: "Search",
					value: "",
					key: "search",
					label: "搜索",
					width: "400px",
				});
			})
			.initButton((buttonGroup, others) => {
				buttonGroup.addButton({
					name: "确定",
					callback: async () => {
						const dialogData: any = others?.form.getFormValue();
						console.log(dialogData, "dialogData");
					},
				});
			})
			.open({
				title: "弹出框1",
				width: "60%",
			});
	}
	private showTestDrawer() {
		this.testDreawer = drawer
			.initForm(form => {
				form.addFormItem({
					component: "Input",
					key: "test1",
					label: "测试1",
					value: "",
				});
				form.addFormItem({
					component: "Input",
					key: "test2",
					label: "测试2",
					value: "强先生",
				});
				form.addFormItem({
					component: "Input",
					key: "test3",
					label: "测试3",
					value: "强先生",
				});
				form.addFormItem({
					component: "Input",
					key: "test4",
					label: "测试4",
					value: "强先生",
				});
			})
			.initButton((buttonGroup, others) => {
				buttonGroup.addButton({
					name: "测试按钮",
					callback: () => {
						console.log(others?.form.getFormValue());
						console.log(this.testDreawer);

						this.testDreawer.shutDown();
						this.showSuccMsg("请求成功");
					},
				});
			})
			.open({
				title: "弹出框1",
				width: "200px",
			});
	}
}
